<template>
  <el-dialog
    title="分配数据权限"
    :visible.sync="authData.isShow"
    :before-close="labelHandleClose"
    width="480px"
  >
    <div class="form-box">
      <el-form ref="addFormEl" :model="form">
        <el-form-item label="角色名称" label-width="90px" prop="rolesName">
          <el-input v-model="form.roleName" disabled></el-input>
        </el-form-item>
        <el-form-item label="权限字符" label-width="90px" prop="roleKey">
          <el-input v-model="form.roleKey" disabled></el-input>
        </el-form-item>
        <el-form-item label="数据范围" label-width="90px" prop="dataScope">
          <el-select v-model="form.dataScope" clearable filterable>
            <el-option
              v-for="item in rangeList"
              :key="item.key"
              :label="item.key"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据权限" label-width="90px" class="el-form-tree">
          <el-tree
            ref="tree"
            v-loading="loading"
            :data="data"
            show-checkbox
            node-key="id"
            :highlight-current="true"
            :default-expand-all="isShowList"
            :expand-on-click-node="false"
            :props="defaultProps"
          >
            <span slot-scope="{ node, data }">
              <span v-html="data.name"></span>
            </span>
          </el-tree>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="success" plain @click="cancelLabel">
        取 消
      </el-button>
      <el-button type="success" :loading="loading" @click="handelAdd">
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getTreeList, getForm, dataAuthor } from '@/api/system/roles' // 接口
export default {
  name: 'RoleAdd',
  msg: '角色列表-分配数据权限',
  props: ['authData'],
  data() {
    return {
      isShowList: true, // 是否全部展开
      rangeList: [{ key: '自定义数据权限', value: '0' }], // 数据范围列表
      roleId: null, // 角色编号
      loading: true,
      data: [],
      defaultProps: {
        children: 'childs',
        label: 'name'
      },
      form: {
        roleName: '',
        roleKey: '',
        dataScope: '',
        deptIds: []
      }
    }
  },
  mounted() {
    this.roleId = this.authData.params
    this.getDataList()
    this.getFormData()
  },
  methods: {
    /* 获取部门信息树状结构 */
    async getDataList() {
      this.loading = true
      let obj = {
        roleId: this.roleId
      }
      await getTreeList(obj, (response) => {
        this.loading = false
        this.data = response.ztrees
        this.$refs.tree.setCheckedKeys(response.depts)
      })
    },
    labelHandleClose(done) {
      this.cancelLabel()
      done()
    },
    cancelLabel() {
      // 关闭前清空
      this.loading = false
      this.roleId = null
      this.authData.params = null
      this.authData.isShow = false
    },
    /* 改变状态 */
    changeStatus() {},
    // 获取表单详情
    async getFormData() {
      await getForm(
        this.roleId,
        (response) => {
          let data = response
          this.form = {
            roleName: data.roleName, // 角色名称
            roleKey: data.roleKey, // 权限字符
            dataScope: data.dataScope // 数据范围
          }
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    /* 确定按钮 */
    async handelAdd() {
      let roleId = this.authData.params
      this.loading = true
      let obj = { ...this.form }
      obj.deptIds = this.$refs.tree.getCheckedKeys()

      await dataAuthor(
        this.roleId,
        obj,
        (response) => {
          this.loading = false
          this.$emit('refresh')
          this.cancelLabel()
        },
        (response) => {
          this.loading = false
          this.$message({
            message: '失败',
            type: 'warning'
          })
        }
      )
    }
  }
}
</script>
<style lang="less">
.el-dialog {
  border-radius: 4px;
  .el-dialog__header {
    border-bottom: 1px solid rgba(225, 228, 233, 1);
  }
}
.el-form-tree {
  min-height: 310px !important;
  max-height: 300px;
  overflow: auto;
}
</style>
